<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书馆进出记录</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <img src="./assets/index.png" alt="图书馆封面" class="cover-image">
  <h4>同学，您进出图书馆的记录如下：</h4>
  <div id="library-records"></div>
  
  <button onclick="window.location.href='index.html'">返回首页</button>

  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>

      function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[$$]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
      }
    
      const studentId = getParameterByName('studentId'); // 获取学号
      const apiUrl = `https://xshx.gufe.edu.cn/webchat/library/list/${studentId}`;

      
    axios({
      url: apiUrl
    }).then(result => {
      const data = result.data;
      const recordsContainer = document.getElementById('library-records');

      // 统计每年的进出次数
      const stats = {};
      data.forEach(item => {
        const year = new Date(item.enterTime).getFullYear();
        const enterFlag = item.enterFlag;

        if (!stats[year]) {
          stats[year] = { enter: 0, leave: 0 };
        }

        if (enterFlag === '0') {
          stats[year].enter++;
        } 
      });

      // 生成统计结果的 HTML
      Object.keys(stats).forEach(year => {
        const div = document.createElement('div');
        div.classList.add('record-card');
        div.innerHTML = `
          <p class="title">${year}年进出记录:</p>
          <p class="count"> ${stats[year].enter}次</p>
        `;
        recordsContainer.appendChild(div);
      });
    }).catch(error => {
      console.error('Error fetching data:', error);
    });
  </script>
</body>
</html>